<template>
  <div class="container-answer">
    <ChatWindow ref="chatRef" />
    <FaqPanel @select="handleFaqSelect" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChatWindow from './components/ChatWindow.vue';
import FaqPanel from './components/FaqPanel.vue';

const chatRef = ref();

interface FaqItem {
  question: string;
  answer: string;
}

const handleFaqSelect = (item: FaqItem) => {
  if (chatRef.value) {
    // 设置输入框内容为选中的问题
    chatRef.value.inputMessage = item.question;
    // 触发发送
    chatRef.value.handleSend();
  }
};
</script>

<style scoped lang="less">
.container-answer {
  padding: 20px;
  height: calc(100vh - 80px);
  display: flex;
  gap: 16px;
  background-color: var(--color-fill-2);

  :deep(.chat-container),
  :deep(.side-panel) {
    background-color: #ffffff;
    margin: 0;
  }
}
</style> 